<html><head>
    <title>在线测试</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
var init={'questions':[
{'question':'jQuery是什么？','answers':['JavaScript库','JavaScript库','JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},
{'question':'找出不同类的一项?','answers':['写字台','沙发','电视','桌布'],'correctAnswer':3},{'question':'国土面积最大的国家是：','answers':['美国','中国','俄罗斯','加拿大'],'correctAnswer':3},{'question':'月亮距离地球多远？','answers':['18万公里','38万公里','100万公里','180万公里'],'correctAnswer':2},{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1},{'question':'jQuery是什么？','answers':['JavaScript库','CSS库','PHP框架','以上都不是'],'correctAnswer':1}]};

    </script>
    <style>
      .ok{
        color: #1296db;
    
      }
      .ok1{
        background-color: #1296db;
      }
      .error{
        color: #d81e06;
      }

    .modal.fade.in{
        top:125px;  
    }
    .modal-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
}
.tag{
  display: flex;
    color: #fff;
    background-color: #000;
    border-radius: 50%;
    width: 20px;
    justify-content: center;

}
.list-group-item1 {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
}
</style>
    </style>
  </head>
  <body>
  
    <div class="panel panel-default">
      <div class="panel-heading">
          用户信息
      </div>
      <div class="panel-body">
          姓名：XXXX
      </div>
  </div>
    <div class="panel panel-default">
    <div class="panel-body" id="questions-list">
      <div>jQuery是什么？</div>
 
      <ul class="list-group">
        <li class="list-group-item"><input type="radio" name="option1" class="form-check-input"  value="1" >First item</li>
        <li class="list-group-item"><input type="radio" name="option1" class="form-check-input">Second item</li>
        <li class="list-group-item"><input type="radio" name="option1" class="form-check-input">Third item</li>
      </ul>

    </div>
    <button type="button" id="button" class="btn btn-primary">下一个</button>

</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					开始考试
				</h4>
			</div>
			<div class="modal-body">
		好好考
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
				考试成绩
				</h4>
			</div>
			<div class="modal-body" id="result-list">
		
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭
				</button>

			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>
  </body>
  <script src="js/init.js"></script>
  <script>
    $(":radio").hide()
 $("#myModal").modal({
        backdrop:"static",
        keyboard: false
    });
    $('#qlist1').show()
  var flag=1
  var pages=1

  var result_e=0
  var result_s=0
$('li').click(function(e){
if(flag==1){
  console.log(e)
   flag=0
  $(this).find('input[type="radio"]').prop('checked', true);
  var myvalue = $('input:radio[name="option'+pages+'"]:checked').val();
  if(myvalue=='on')
  {
    $(this).append('&nbsp;&nbsp;<svg t="1689647316061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5527" width="16" height="16"><path d="M827.392 195.584q65.536 65.536 97.792 147.456t32.256 167.936-32.256 167.936-97.792 147.456-147.456 98.304-167.936 32.768-168.448-32.768-147.968-98.304-98.304-147.456-32.768-167.936 32.768-167.936 98.304-147.456 147.968-97.792 168.448-32.256 167.936 32.256 147.456 97.792zM720.896 715.776q21.504-21.504 18.944-49.152t-24.064-49.152l-107.52-107.52 107.52-107.52q21.504-21.504 24.064-49.152t-18.944-49.152-51.712-21.504-51.712 21.504l-107.52 106.496-104.448-104.448q-21.504-20.48-49.152-23.04t-49.152 17.92q-21.504 21.504-21.504 52.224t21.504 52.224l104.448 104.448-104.448 104.448q-21.504 21.504-21.504 51.712t21.504 51.712 49.152 18.944 49.152-24.064l104.448-104.448 107.52 107.52q21.504 21.504 51.712 21.504t51.712-21.504z" p-id="5528" fill="#d81e06"></path></svg>')
    $(this).addClass('error')
    $(this).children('.tag').attr('style','background-color:#d81e06')
    $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").next('.tag').attr('style','background-color:#1296db')
    $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").parent().attr("style",'color:#1296db;display:flex')
    $("input[name='option"+pages+"'][value='"+init.questions[pages-1].correctAnswer+"']").parent().append('&nbsp;&nbsp;<svg t="1689647302805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4492" width="16" height="16"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1296db" p-id="4493"></path></svg>')
    result_e++
  }
  else{
    $(this).append('&nbsp;&nbsp;<svg t="1689647302805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4492" width="16" height="16"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#1296db" p-id="4493"></path></svg>')
    $(this).addClass('ok')
    $(this).children('.tag').attr('style','background-color:#1296db')
    result_s++
  }
$('input:radio[name="option'+pages+'"]').prop('disabled','disabled')
}

});
$("#button").click(function(){
  console.log(init.questions.length)
  console.log(flag)
  if(pages<init.questions.length){
    if(flag==1){
    alert('选择')
    $(".alert").alert()
  }
  else{
    flag=1
    $('#qlist'+pages).hide();
    pages++
    $('#qlist'+pages).show();

  }
  }
  else{
    $('#button').hide()
    $("#myModal1").modal({
        backdrop:"static",
        keyboard: false
    });
    $('#result-list').html('正确'+result_s+"|错误"+result_e)
  }

})
  </script>

  </html>  
